import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  PermissionsAndroid,
  Platform,
  Button,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {
  ImageButton,
  LinearBoardButton,
  LinearButton,
  TextButton,
} from '../../components/Button';
import WalletUtils from '../../utils/wallet/WalletUtils';
import {LinerBoardTextInput} from '../../components/TextInput';
import {NormalHeader} from '../../components/NavigationHeader';
import {getInviteList} from '../../api/user';
import {getUserAwardList, getAwardList} from '../../api/award';
import {showToast} from '../../components/Toast';
import {updateUserInfo} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {BASE_API} from '../../config';
import LinearGradient from 'react-native-linear-gradient';
import {ScrollView} from 'react-native-gesture-handler';
import ModalHandler from '../../components/ModalHandler';
import {translate} from 'i18n-js';
var moment = require('moment');

class AwardRecordsScreen extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      records: [],
      page: 1,
      totalNum: 0,
    };
  }

  componentDidMount() {
    this.getData(1);
  }

  formatNum = (num) => {
    if (!num) return '0';
    return num;
  };

  formatTime = (dt) => {
    return moment(dt).format('MM/DD/YYYY');
  };

  calPageLength = (totalNum, size) => {
    return Math.floor(totalNum / size) + (totalNum % size == 0 ? 0 : 1);
  };

  getData = (page) => {
    let pageSize = 10;
    if (page < 1) {
      return;
    }
    if (page != 1 && this.calPageLength(this.state.totalNum, pageSize) < page) {
      return;
    }

    getAwardList({
      userToken: this.props.userInfo.token,
      size: pageSize,
      page: page,
    }).then((resp) => {
      console.log('getAwardList', JSON.stringify(resp));
      this.setState({
        records: resp.data.rows,
        totalNum: resp.data.pageInfo.total,
      });
    });
  };

  renderComponent = () => {
    return (
      <View style={{flex: 1, backgroundColor: '#160231'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="History"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <ScrollView
          style={{
            paddingHorizontal: 20,
          }}>
          <View
            style={{
              marginTop: 20,
              backgroundColor: '#443559',
              padding: 16,
              width: '100%',
              borderRadius: 16,
            }}>
            <Text
              style={{
                color: '#fff',
                fontWeight: 'bold',
                fontSize: 18,
                marginBottom: 20,
              }}>
              Records
            </Text>
            {this.state.records.map((item, index) => {
              return (
                <View key={index}>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <View
                      style={{
                        backgroundColor: '#000',
                        borderRadius: 40,
                        marginLeft: 4,
                      }}>
                      <Text
                        style={{
                          color: '#D8D8D8',
                          lineHeight: 30,
                          textAlign: 'center',
                          fontSize: 14,
                          width: 30,
                          height: 30,
                        }}>
                        -{item.levelAmount}
                      </Text>
                    </View>

                    <Text
                      style={{
                        color: '#D8D8D8',
                        fontSize: 14,
                        marginLeft: 6,
                        flex: 1,
                      }}>
                      {item.name != 'tryAgain' ? 'Got ' + item.name : 'Lottery'}
                      {}
                    </Text>
                    <Text
                      style={{
                        color: '#D8D8D8',
                        fontSize: 14,
                      }}>
                      {this.formatTime(item.createTime)}
                    </Text>
                  </View>
                  <Image
                    style={{
                      width: '100%',
                      marginTop: 4,
                    }}
                    source={require('../../assets/user/divider.png')}></Image>
                </View>
              );
            })}
            {this.state.totalNum > 0 ? (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginTop: 10,
                }}>
                <ImageButton
                  btnStyle={{
                    width: 30,
                    height: 30,
                  }}
                  imageStyle={{
                    width: 15,
                    height: 15,
                  }}
                  source={require('../../assets/common/common_back_white.png')}
                  onPress={() => {
                    this.getData(this.state.page - 1);
                  }}></ImageButton>
                <Text
                  style={{
                    marginHorizontal: 10,
                    color: '#fff',
                  }}>
                  {this.state.page}
                </Text>
                <ImageButton
                  btnStyle={{
                    width: 30,
                    height: 30,
                  }}
                  imageStyle={{
                    width: 15,
                    height: 15,
                  }}
                  source={require('../../assets/common/backwhite_icon.png')}
                  onPress={() => {
                    this.getData(this.state.page + 1);
                  }}></ImageButton>
              </View>
            ) : null}
          </View>
          <View
            style={{
              width: '100%',
              height: this.props.widgetLayout.show
                ? this.props.widgetLayout.height
                : 0,
              marginTop: 10,
            }}></View>
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  widgetLayout: state.Layout.widgetLayout,
});

const mapDispatchToProps = (dispatch) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(AwardRecordsScreen);
